<template>
  <div class="top-filter-parent-wrapper">
    <div class="help-describe-new" v-if="isShowHelp">
      <el-tooltip class="item" effect="dark" :content="helpContent" placement="left">
        <i class="icon-help-describe"></i>
      </el-tooltip>
    </div>
    <div class="top-filter-wrapper" :class="noMarginBottom==1?'noMarginBottom':''">
      <!--<transition name="slide-fade-title">-->
      <div>
        <div class="left-circle-wrapper"></div>
        <div class="title-wrapper">{{title}}</div>
      </div>
      <!--</transition>-->
      <!--<div class="search-box">-->
      <transition name="slide-fade">
        <div class="filter-wrapper" v-show="!showChartTitle">
          <div class="left-blank-wrapper"></div>
          <div class="right-filter-wrapper">
            <slot></slot>
          </div>
        </div>
      </transition>
      <!--</div>-->
      <!--<div class="divider-line"></div>-->
    </div>
  </div>
</template>

<script>
  import {bus} from './js/bus'
  export default {
    props: {
      title: {
        type: String,
        default: '图表名称'
      },
      helpContent: {
        type: String,
        default: '请自行填充帮助数据！'
      },
      isShowHelp: {
        type: Boolean,
        default: false
      },
      noMarginBottom: {
        type: Number,
        default: 2
      }
    },
    components: {},
    data () {
      return {
        radio: '1',
        valueYear: '',
        valueDistrict: '',
        hospitalValue: '',
        medicalTypeValue: '',
        checkedHospitalList: [],
        showChartTitle: true
      };
    },
    mounted(){
      if (document.querySelector('header')) {
        document.querySelector('header')
          .addEventListener("mouseenter", () => {
            // 当前下拉框消失，就重置onceEnter,表示重新打开光标滑入动作
            this.onceEnter = false;

            this.showChartTitle = true;
          });
      }
      if (document.querySelector('aside')) {
        document.querySelector('aside')
          .addEventListener("mouseenter", () => {
            // 当前下拉框消失，就重置onceEnter,表示重新打开光标滑入动作
            this.onceEnter = false;

            this.showChartTitle = true;
          });
      }

      bus.$on('showRightFilterView', (uid) => {
        if (this._uid == uid) {
          // 鼠标已经进入enter
          this.onceEnter = true;

          this.showChartTitle = false;
          bus.$emit('filterIsShowing', this._uid)
        } else {
          // 当前下拉框消失，就重置onceEnter,表示重新打开光标滑入动作
          this.onceEnter = false;

          this.showChartTitle = true;
        }
      })
    },
    methods: {
      dropDownIsVisible(visible){
        console.log(visible)
      },
      _showChartTitle() {
//        this.showChartTitle = true;
      },
      _hideChartTitle() {
//        this.showChartTitle = false;
        if (!this.onceEnter) {
          bus.$emit('showRightFilterView', this._uid)
        }
      }
    }
  }
</script>

<style lang="scss">
  .top-filter-parent-wrapper {
    position: relative;
    padding: 10px 5px;

    .help-describe-new {
      position: absolute;
      right: 20px;
      top: 50px;
      z-index: 50000;
      font-size: 20px;
      cursor: pointer;
    }

    /* 进入和离开动画可以分别 */
    /* 设置不同的持续时间(duration)和动画函数(timing function) */
    .slide-fade-enter-active {
      transition: all .8s ease;
    }

    .slide-fade-leave-active {
      transition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
      /* .slide-fade-leave-active 在低于 2.1.8 版本中 */
    {
      transform: translateX(0);
      opacity: 0;
    }

    .slide-fade-title-enter-active {
      transition: all .8s ease;
    }

    .slide-fade-title-leave-active {
      transition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-title-enter, .slide-fade-title-leave-to
      /* .slide-fade-leave-active 在低于 2.1.8 版本中 */
    {
      transform: translateX(10px);
      opacity: 0;
    }

    .top-filter-wrapper {
      line-height: 34px;
      height: 34px;
      box-sizing: border-box;
      position: relative;
      /*border-bottom: solid 1px #222;*/
    }
    .noMarginBottom {
      margin-bottom: 0;
    }
    .search-box {
      /*overflow:hidden;*/
      width: 100%;
      clear: both;
      height: 34px;
    }

    .filter-wrapper {
      float: right;
      position: absolute;
      right: 0;
      top: 0;
      display: flex;
      align-items: center;
      z-index: 50001;
    }

    .left-blank-wrapper {
      width: 20px;
      height: 34px;
      display: inline-block;
      background: rgba(27, 43, 68, 0.9);
      font-size: 0;
    }

    .right-filter-wrapper {
      display: inline-block;
      background: rgba(27, 43, 68, 1);
    }

    .divider-line {
      height: 1px;
      background: #f4f4f4;
      width: 100%;
    }

    .left-circle-wrapper {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #018DDE;
      display: inline-block;
      margin-left: 10px;
    }

    .title-wrapper {
      display: inline-block;
      font-size: 14px;
      margin-left: 5px;
      color: #fff;
    }

    .district-content-wrapper {
      width: 80px;
      display: inline-block;
      margin-right: 10px;
    }

    .el-input__inner {
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 30px;
      line-height: 30px;
      outline: 0;
      padding: 0 5px;
      -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
      transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
      width: 100%;
    }

    .el-popper[x-placement^=bottom] {
      margin-top: 10px;
    }

    .hospital-level-children-wrapper {
      width: 200px;
      height: 200px;
    }

    .el-radio + .el-radio {
      margin-left: 10px;
    }
  }
</style>
